
<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form"  :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item  :label="i18n('form.name','名称')" prop = "name">
                                <a-input :placeholder="i18n('form.name','请输入名称','input')" v-model="mdl.name"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item  :label="i18n('form.type','模板类型')" prop = "type">
                                <a-select :placeholder="i18n('form.type','请输入模板类型','input')" :options="templateTypeList" v-model="mdl.type"></a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item  :label="i18n('form.fileName','文件名称')" prop = "fileName">
                                <a-input ref="fileName" :placeholder="i18n('form.fileName','请输入文件名称','input')" @focus="selectCtl('fileName')" v-model="mdl.fileName"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item  :label="i18n('form.genPath','生成路径')" prop = "path">
                                <a-input ref="path" :placeholder="i18n('form.genPath','请输入生成路径','input')" @focus="selectCtl('path')" v-model="mdl.path"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item  :label="i18n('form.enabled','是否启用')" prop = "enabled">
                                <a-switch v-model="enabled"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item  :label="$ti18('rxList.index','序号')" prop = "sn">
                                <a-input-number :min="1" v-model="mdl.sn" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item  :label="i18n('form.templetContent','模板内容')" prop = "content" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <rx-monaco-editor
                                    ref="content"
                                    v-model="mdl.content"
                                    language="java"
                                    style="height:500px;"
                                    @focus="selectCtl('content')"
                                >
                                    <template v-slot:monacoeditor>
                                        <div>
                                            <a-dropdown>
                                                <a-menu slot="overlay">
                                                    <template v-for="(item,index) in variableFormAry">
                                                        <a-menu-item :key="item.value" @click="insertScript(item,'model.vars')"> {{item.label}} </a-menu-item>
                                                    </template>
                                                </a-menu>
                                                <a-button style="margin-right: 8px">
                                                    {{i18n('list.insertFormVar','插入表单变量')}}
                                                    <a-icon type="down"/>
                                                </a-button>
                                            </a-dropdown>
                                            <a-dropdown>
                                                <a-menu slot="overlay">
                                                    <template v-for="(item,index) in variableGlobalAry">
                                                        <a-menu-item :key="item.value" @click="insertScript(item,'vars')"> {{item.label}} </a-menu-item>
                                                    </template>
                                                </a-menu>
                                                <a-button style="margin-right: 8px">
                                                    {{i18n('list.insertGlobalVar','插入全局变量')}}
                                                    <a-icon type="down"/>
                                                </a-button>
                                            </a-dropdown>
                                        </div>
                                    </template>
                                </rx-monaco-editor>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import FormCodegenTemplateApi from '@/api/form/codegen/formCodegenTemplate';
    import FormCodegenVariableApi from "@/api/form/codegen/formCodegenVariable";
    import {RxDialog,BaseFormModel,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
    import codegenTemplateType from "./codegenTemplateType";

    export default {
        name: 'FormCodegenTemplateEdit',
        mixins:[BaseFormModel,codegenTemplateType],
        components: {
            RxDialog,
            RxMonacoEditor
        },
        data() {
            return {
                ctlName:'',
                mdl:{
                    path:"",
                    fileName:"",
                    sn:1
                },
                enabled:false,
                variableFormAry:[
                    {value:"classVar",label: this.i18n('variableFormAry.classVar',"类变量名")},
                    {value:"class",label: this.i18n('variableFormAry.class',"类名")},
                    {value:"package",label: this.i18n('variableFormAry.package',"包名")},
                    {value:"packageName",label: this.i18n('variableFormAry.packageName',"子系统名称")}
                ],
                variableGlobalAry:[],
                rules: {
                    fileName: [{required: true, message: this.i18n('form.fileName','请输入文件名称','input'), trigger: 'change'}],
                    name: [{required: true, message: this.i18n('form.name','请输入名称','input'), trigger: 'change'}],
                    path: [{required: true, message: this.i18n('form.genPath','请输入生成路径','input'), trigger: 'change'}],
                    type: [{required: true, message: this.i18n('form.type','请输入模板类型','input'), trigger: 'change'}]
                }
            }
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formCodegenTemplate",key);
            },
            onload_(values){
                var self=this;
                FormCodegenVariableApi.queryList({params:{"Q_ENABLED__S_EQ":"YES"}}).then(res=>{
                    if(!res || !res.data){
                        return;
                    }
                    self.variableGlobalAry=res.data.map(item=>{
                        return {value:item.name,label:this.$i18(item.desc,"描述国际化")};
                    });
                })
                if(values){
                    this.enabled = values.enabled=='YES'?true:false;
                }
            },
            get(id){
                return FormCodegenTemplateApi.get(id);
            },
            save(){
                this.mdl.enabled=this.enabled?'YES':'NO';
                return FormCodegenTemplateApi.save(this.mdl);
            },
            selectCtl(ctlName){
                this.ctlName=ctlName;
            },
            insertScript(item,alias){
                if(!this.ctlName || this.ctlName=='content') {
                    var script="${"+alias+"."+item.value+"}";
                    this.$refs.content.insertContent(script);
                }else{
                    var script="{" + item.value + "}";
                    if(!this.mdl[this.ctlName]){
                        this.mdl[this.ctlName]=script;
                    }
                    else{
                        this.mdl[this.ctlName]=this.mdl[this.ctlName] +script;
                    }
                    this.$refs[this.ctlName].focus();
                }
            }
        }
    }
</script>
<style>
    .relick a{
        margin-right: 10px;
    }

</style>
